<template>
  <Card>
    <div class="content">
      <van-tabs v-model="condition.state" @change="changeList">
        <van-tab
          :title="item.title"
          v-for="(item, index) in tabsList"
          :key="item.id"
          :name="item.id"
        >
          <div class="content-list" v-if="contentList.length">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="loadData"
            >
              <div
                class="info"
                v-for="(item, index) in contentList"
                :key="index"
                @click="lookDetail(item.eventId, 'VIEW')"
              >
                <div class="icon color-0" v-if="item.state == 0">待认领</div>
                <div class="icon color-1" v-if="item.state == 1">已完成</div>
                <div class="icon color-2" v-if="item.state == 2">已认领</div>
                <div class="icon color-9" v-if="item.state == 9">已撤消</div>
                <div class="info-title">
                  <div class="name">{{ item.title }}</div>
                  <div class="time">{{ item.typeName }}</div>
                </div>
                <div class="info-content">
                  {{ item.content }}
                </div>
                <div class="info-bottom">
                  <van-button
                    v-if="item.state == 0 && item.checkStatus == 0"
                    plain
                    type="primary"
                    style="
                      border: 1px solid #ff6745;
                      color: #ff6745;
                      padding: 0 15px;
                      font-size: 12px;
                    "
                    round
                    size="mini"
                    @click.stop="handleEdit(item.eventId)"
                    >编辑</van-button
                  >
                  <van-button
                    plain
                    type="primary"
                    style="
                      border: 1px solid #ff6745;
                      color: #ff6745;
                      padding: 0 15px;
                      font-size: 12px;
                    "
                    v-if="item.state == 0 && item.checkStatus == 0"
                    @click.stop="handleCancel(item.eventId)"
                    round
                    size="mini"
                    >撤消</van-button
                  >
                  <van-button
                    plain
                    type="primary"
                    style="
                      border: 1px solid #ff6745;
                      color: #ff6745;
                      padding: 0 15px;
                      font-size: 12px;
                    "
                    v-if="item.state == 9"
                    @click.stop="handleRecover(item.eventId)"
                    round
                    size="mini"
                    >恢复</van-button
                  >
                  <van-button
                    plain
                    type="primary"
                    style="
                      border: 1px solid #ff6745;
                      color: #ff6745;
                      padding: 0 15px;
                      font-size: 12px;
                    "
                    v-if="item.state == 1 && item.feedbackStatus != 1"
                    @click.stop="lookDetail(item.eventId, 'Feedback')"
                    round
                    size="mini"
                    >反馈</van-button
                  >
                  <van-button
                    plain
                    type="primary"
                    style="
                      border: 1px solid #ff6745;
                      color: #ff6745;
                      padding: 0 15px;
                      font-size: 12px;
                    "
                    v-if="item.state == 2 && condition.state == 2"
                    @click.stop="lookDetail(item.eventId, 'Complete')"
                    round
                    size="mini"
                    >完成</van-button
                  >
                  <van-button
                    v-if="item.checkStatus == 2"
                    plain
                    type="primary"
                    @click.stop="handleDelete(item.eventId)"
                    style="
                      border: 1px solid #ff6745;
                      color: #ff6745;
                      padding: 0 15px;
                      font-size: 12px;
                    "
                    round
                    size="mini"
                    >删除</van-button
                  >
                </div>
              </div>
            </van-list>
          </div>

          <van-empty description="暂无数据" v-else></van-empty>
        </van-tab>
      </van-tabs>
    </div>
  </Card>
</template>

<script>
import Card from "@/components/Card.vue";
import {
  postWxyMyList,
  postWxyDel,
  postWxyCancel,
  postWxyRecover,
  postWxyMyAcceptList,
} from "@/api/business";
export default {
  name: "MyWish",
  components: { Card },
  data() {
    return {
      tabsList: [
        { id: "", title: "我提交" },
        { id: 9, title: "回收池" },
        { id: 2, title: "我认领" },
      ],
      condition: { state: "", page: 1, limit: 10 },
      contentList: [],
      loading: false,
      finished: false,
    };
  },
  created() {},
  mounted() {
    this.loadData();
  },
  methods: {
    // 切换列表
    changeList() {
      this.loading = false;
      this.finished = false;
      this.contentList = [];
      this.condition.page = 1;
      this.loadData();
    },
    // 加载数据
    loadData() {
      const api =
        this.condition.state == 2 ? postWxyMyAcceptList : postWxyMyList;
      api(this.condition).then((res) => {
        const data = res.data;
        this.contentList.push(...data);
        this.loading = false;
        if (data.length !== 10) {
          this.finished = true;
        }
        this.condition.page++;
      });
    },
    // 删除
    handleDelete(eventId) {
      postWxyDel({ eventId }).then((res) => {
        this.$toast.success({
          message: res.msg,
          duration: 1000,
        });
        this.changeList();
      });
    },
    // 撤消
    handleCancel(eventId) {
      postWxyCancel({ eventId }).then((res) => {
        this.$toast.success({
          message: res.msg,
          duration: 1000,
        });
        this.changeList();
      });
    },
    // 回收
    handleRecover(eventId) {
      postWxyRecover({ eventId }).then((res) => {
        this.$toast.success({
          message: res.msg,
          duration: 1000,
        });
        this.changeList();
      });
    },
    //查看详情
    lookDetail(eventId, type) {
      this.$router.push({
        path: "/wishDetail",
        query: { eventId, type },
      });
    },
    //编辑
    handleEdit(eventId) {
      this.$router.push({
        path: "/postWish",
        query: {
          eventId,
          type: "EDIT",
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-tabs {
  height: 100%;
  .van-tabs__wrap {
    height: 100px;
  }
  .van-tabs__content {
    height: calc(100% - 150px);
    .van-tab__pane {
      height: 100%;
      .content-list {
        height: 100%;
        overflow: auto;
      }
    }
  }
}
.content {
  height: 100%;
  .van-search__content {
    border-radius: 30px;
  }
  &-list {
    margin-top: 20px;
    padding: 20px 0;
    background-color: #ffffff;
    .info {
      margin: 30px;
      padding: 60px 20px 10px;
      min-height: 130px;
      background: #ffffff;
      box-shadow: 0px 0px 5px 4px rgba(194, 194, 194, 0.2);
      border-radius: 24px;
      position: relative;
      border-bottom: 2px dashed #ecebeb;
      .icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 150px;
        padding: 5px 10px;
        text-align: center;
        color: #ffffff;
        border-radius: 24px 10px 40px 0px;
      }
      .color-0 {
        background: linear-gradient(45deg, #ff8c35, #ffcb4c);
      }
      .color-1 {
        background: linear-gradient(45deg, #238df7, #72b5f8);
      }
      .color-2 {
        background: linear-gradient(45deg, #5ed88f, #86f097);
      }
      .color-9 {
        background: linear-gradient(45deg, #ff3647, #ff6f97);
      }
      &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name {
          font-size: 16px;
          font-weight: bold;
          width: calc(100% - 150px);
          @include text-ellipsis;
        }
        .time {
          font-size: 15px;
          color: #999999;
          text-align: right;
          width: 150px;
        }
      }
      &-content {
        font-size: 15px;
        color: #666666;
        line-height: 50px;
        @include text-multiple-ellipsis;
      }
      &-bottom {
        padding: 10px 0;
        text-align: right;
      }
    }
  }
}
</style>
